<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>        
        <script type="text/javascript" src="ui/js/jquery/ui/jquery-ui-1.10.4.custom.js"></script>
        <link href="ui/css/jquery/ui/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet" >
        <script src="ui/js/requerimiento.js"></script>
        <script src="ui/js/jquery.ajaxfileupload.js"></script>
        <script src="ui/js/jquery.jeditable.js"></script>
        <script src="ui/js/jquery.jeditable.datepicker.js"></script>
        <link href="ui/css/simplegrid.css" rel="stylesheet" >
        
     <script>        
        $(function() {
            $( "#adicional" ).tabs({
              collapsible: false
            });            
          });
    </script>
        
    <style>
       A:link, A:visited { text-decoration: none }
            .reg {
                width: 100%;
                margin: 0;
                border: 0 solid #ccc;
                padding: 0.5em;
                border-radius: 0em;     
                float: left;
                margin-top: 1px;
            }
            
            .reg1 {
                width: 100%;
                margin: 0;
                border: 0 solid #ccc;
                padding: 0.5em;
                border-radius: 0em;     
                float: left;
                margin-top: 1px;
            }
            
            .desc {
                width: 100%;
                margin: 0;
                border: 1px solid #ccc;
                padding: 0.5em;
                border-radius: 0em;     
                float: left;
            }
            
            .row1 {
                width: 50%;
                margin: 0;
                border: 0 solid #ccc;
                padding: 0.5em;
                border-radius: 0em;     
                float: right;
            }
            
            
            .row2 {
                width: 30%;
                margin: 0;
                border: 0 solid #ccc;
                padding: 0.5em;
                border-radius: 0em;     
                float: right;
            }

            .reg label {
                display: inline-block;
                width: 20%;
                font-weight: bold;
            }
            
            .reg1 label {
                display: inline-block;
                width: 40%;
                font-weight: bold;
            }

            .reg input {
                display: inline-block;
                width: 50%;
                margin: 0 0 0 5%;
            }

            .reg label.help {
                display: block;
            }

            .reg label.help:before {
                content: "(";
            }

            .reg label.help:after {
                content: ")";
            }
            
            .centered{
                width:100%;
                margin-left:auto;
                margin-right:auto;
                text-align:center;
            }
            
           /* number style */
            #coms {
                    margin: 10px 0 40px;
                    padding: 0;
            }
            #coms li {
                    padding: 10px 0 20px;
                    list-style: none;
                    border-top: solid 1px #ccc;
                    position: relative;
            }
            #coms cite {
                    font: bold 120%/90% Arial, Helvetica, sans-serif;
                    color: #666;
            }
            #coms .time {
                    color: #5c5c5c;
                    margin: 0 0 10px;
            }
            #coms .commentnumber {
                    position: absolute;
                    right: 0;
                    top: 8px;
                    font: normal 200%/100% Georgia, "Times New Roman", Times, serif;
                    color: #ccc;
            }
            
            #accs {
                    margin: 10px 0 40px;
                    padding: 0;
            }
            #accs li {
                    padding: 10px 0 20px;
                    list-style: none;
                    border-top: solid 1px #ccc;
                    position: relative;
            }
            #accs cite {
                    font: bold 120%/90% Arial, Helvetica, sans-serif;
                    color: #666;
            }
            #accs .time {
                    color: #5c5c5c;
                    margin: 0 0 10px;
            }
            #accs .commentnumber {
                    position: absolute;
                    right: 0;
                    top: 8px;
                    font: normal 200%/100% Georgia, "Times New Roman", Times, serif;
                    color: #ccc;
            }

            .ui-menu { position: absolute; width: 100px; }
            
            .texta { border: none;word-wrap: break-word }
            
    </style>
        
    </head>
    <body> 
        <input id="idrx" name="idrx" type="hidden" value="<%=request.getParameter("idrx").substring(0, request.getParameter("idrx").length()-4) %>"/><br>        
        <span style="font-weight: bold"><a id="proyecto" href="#"></a></span><img src="ui/images/derecha.png" width="16px" height="16px" id="der1"/>
        <span><a id="principal" href="javascript:abrirPrincipal()"></a></span><img src="ui/images/derecha.png" width="16px" height="16px" id="der2"/>
        <input type="hidden" id="principalid">        
        <span><a id="codigo" href=""></a></span>
        
        <h3 id="titulo"></h3>
        
        <div style="float: right">
            
            <button id="avanceBtn" class="button">Avance</button>
            <button id="resolver" class="button">Resolver</button>
            <button id="cerrar" class="button">Cerrar</button>  
            
            <div class="button-dropdown">
                <button id="acciones" class="dropdown-toggle">Mas Acciones</button>
                <ul class="dropdown-menu" data-role="dropdown">
                    <li id="reasignar"><a href="#">Reasignar</a></li>                    
                    <li class="divider"></li>
                    <li><a href="#">Re-Abrir</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Eliminar</a></li>
                </ul>
            </div>


        </div>
            
        <div id="ocs">
            <input id="idtipo" type="hidden">
        </div>
                
        
        <div class="grid grid-pad">
            <div class="col-8-12">
                <div class="content">
                    <legend style="font-size: 16px; color: #00356a; font-weight: bold">Detalles</legend>                    
                    <div class="reg">
                        <label for="req">Tipo:</label>
                        <span  id="req"></span>
                        <br>
                        <label for="pri">Prioridad:</label>
                        <span  id="pri"></span>
                        <br>
                        <label for="ite">Iteraci&oacute;n:</label>
                        <span  id="ite"></span>
                        <br>                             
                        <label for="est">Estado:</label>                                
                        <span id="est"></span>                        
                    </div>
                </div>
            </div>
            <div class="col-4-12">
                <div class="content">
                    <legend style="font-size: 16px; color: #00356a; font-weight: bold">Personas/Fechas</legend>
                    <div class="reg1">     
                        <!--
                        <label for="autor">Autor:</label>
                        <span  id="autor"></span>
                        <br>
                        <label for="resp">Responsable:</label>
                        <span  id="resp"></span>
                        <br>
                        <label for="inicio">Inicio:</label>
                        <span class="fecedit" id="inicio"></span>
                        <br>
                        <label for="fin">Final:</label>
                        <span class="fecedit" id="fin"></span>
                        -->
                        
                        <table>
                            <tr>
                                <td>
                                    <label for="autor">Autor:</label>
                                </td>
                                <td>
                                    <span  id="autor"></span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="resp">Responsable:</label>
                                </td>
                                <td>
                                    <span  id="resp"></span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="inicio">Inicio:</label>
                                </td>
                                <td>
                                    <span class="fecedit" id="inicio"></span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="fin">Final:</label>
                                </td>
                                <td>
                                    <span class="fecedit" id="fin"></span>
                                </td>
                            </tr>
                        </table>
                        
                        
                    </div>
                </div>
            </div>
        </div>        
        
        <div class="grid grid-pad">
            <div class="col-8-12">
                <div class="content">
                    <legend style="font-size: 16px; color: #00356a; font-weight: bold">Descripci&oacute;n</legend>
                    <div class="desc">
                        <!--<textarea class="texta" cols="74" readonly rows="12" id="desc"></textarea>-->
                        <div class="texta" id="desc"></div>
                    </div>
                </div>
            </div>
            <div class="col-4-12">
                <div class="content">
                    <legend style="font-size: 16px; color: #00356a; font-weight: bold">Seguimiento</legend>
                        
                                        <!--
                    <div class="reg1">
                        <label for="fechaava">Fecha:</label>
                        <span id="fechaava"></span>
                        <br>
                        <label for="avancereq">Avance:</label>                        
                        <span id="avancereq"></span>
                        <span style="background-color: palegreen; width: 150px; height: 12px">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                            
                        </span>
                        <br>
                        <label for="etapaava">Etapa:</label>
                        <span  id="etapaava"></span>
                        <br>
                        <label for="tiempoinv">Tiempo Inv:</label>
                        <span  id="tiempoinv"></span>
                    </div>
                -->    
                
                    <div class="reg1">
                        <table>
                            <tr>
                                <td style="font-weight: bold">Fecha:</td>
                                <td id="fechaava"></td>
                            </tr>
                            <tr>
                                <td style="font-weight: bold">Avance:</td>
                                <td id="avancereq">
                                    <div style="background-color: #2E92CF; width: 230px; height: 18px">
                                        <div id="porcava" style="background-color: palegreen; height: 17px; font-size: 11px; text-align: center"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td style="font-weight: bold">Etapa:</td>
                                <td id="etapaava"></td>
                            </tr>
                            <tr>
                                <td style="font-weight: bold">Tiempo Inv:&nbsp;&nbsp;</td>
                                <td id="tiempoinv"></td>
                            </tr>
                        </table>
                    </div>
                        
                        
                       
                </div>
            </div>
        </div>
        
        <div class="grid grid-pad">           
            <div class="col-8-12">
                <legend style="font-size: 16px; color: #00356a; font-weight: bold">Actividades</legend>
                <div class="content">
                    <div id="adicional" class="">
                        <ul>
                            <li><a id="tab1" href="#tabs-1">Tareas&nbsp;<img src="ui/images/task.png" width="16px" height="16px" id="nuevo_sub" style="cursor: pointer"/></a></li>
                            <li><a href="#tabs-2">Comentarios&nbsp;<img src="ui/images/comentario.png" width="16px" height="16px" id="nuevo_com" style="cursor: pointer"/></a></li>
                            <li><a href="#tabs-3">Historial</a></li>
                        </ul>
                        <div id="tabs-1">
                            <ul id="subs">                       
                            </ul>
                        </div>
                        <div id="tabs-2">
                            <ol id="coms">                       
                            </ol>
                        </div>
                        <div id="tabs-3">
                            <ol id="accs">                       
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-4-12">
                <legend style="font-size: 16px; color: #00356a; font-weight: bold">Evidencia                   
                 <img src="ui/images/upload2.png" width="14px" height="14px" onclick="cargarArchivos()"/>
                    </legend>                    
                    <ul id="art">                       
                    </ul> 
                
                
            </div>
            
        </div>
        

        
        
        <div  id="dlg_artefactos" style="display: none" title="Carga de Artefactos y Evidencas">
            <form method="post" >
                <div class="centered">                
                <input type="file" name="file" /><br/>                
            </div>
            </form>
        </div>
        
        <!--Sub comentarios-->        
        <div  id="dlg_comentarios" style="display: none" title="Agregar un Comentario">
            <form method="post" id="form_comentario" onsubmit="return false" >
                <div class="centered">                
                    <textarea id="comentario" name="comentario" required cols="40" rows="3"></textarea>
                </div>
                <input type="submit" id="enviarCom" style="display: none" value="Guardar" />
            </form>
        </div>
        
        <!--Avance-->        
        <div  id="dlg_avance" style="display: none" title="Registrar Avance">
            <form method="post" id="form_avance" onsubmit="return false" >
                <div class="reg1">
                    <label for="avance">Avance</label>
                    <input id="avance" name="avance" required />&nbsp;%
                    <br />
                    <label for="tipo">Tiempo</label>
                    <input id="tiempo" name="tiempo" required />&nbsp;H
                </div>
                <input type="submit" id="enviarAva" style="display: none" value="Guardar" />
            </form>
        </div>
        
        <!--Cerrar-->        
        <div  id="dlg_cerrar" style="display: none" title="Cerrar Requerimiento">
            <form method="post" id="form_cerrar" onsubmit="return false" >
                <div class="centered">                
                    <textarea id="comentarioCer" name="comentarioCer" required cols="40" rows="3"></textarea>
                </div>
                <input type="submit" id="enviarCer" style="display: none" value="Guardar" />
            </form>
        </div>        
        
        <!--Resolver-->        
        <div  id="dlg_resolver" style="display: none" title="Resolver Requerimiento">
            <form method="post" id="form_resolver" onsubmit="return false" >
                
                <div class="reg1">
                    <div id="div-res">
                        <label for="responsableRes">Nuevo Responsable</label>
                        <select id="responsableRes" name="responsableRes" placeholder="Responsable" required></select>
                    </div>
                    <br />
                    <label for="comentarioRes">Comentario</label>
                    <textarea id="comentarioRes" name="comentarioRes" required cols="40" rows="3"></textarea>
                    <br />
                    <label for=motivoRes">Motivo</label>
                    <select id="motivoRes" name="motivoRes" placeholder="Motivo" required></select>
                </div>
                <input type="submit" id="enviarRes" style="display: none" value="Guardar" />
            </form>
        </div> 
        
        <!--Reasignar-->        
        <div  id="dlg_reasignar" style="display: none" title="Reasignar Requerimiento">
            <form method="post" id="form_reasignar" onsubmit="return false" >
                
                <div class="centered">                
                    
                    <label for="responsableRea">Nuevo Responsable</label>
                    <select id="responsableRea" name="responsableRea" placeholder="Responsable" required></select>
                    <label for="comentarioRea">Comentario</label>
                    <textarea id="comentarioRea" name="comentarioRea" required cols="40" rows="3"></textarea>
                </div>
                <input type="submit" id="enviarRea" style="display: none" value="Guardar" />
            </form>
        </div> 
        
        
        <!--Sub requerimientos-->        
        <div id="dlg_requerimientos" style="display: none" title="Requerimientos">      
                <form id="form_requerimientos" onsubmit="return false">
                    
                    <table>
                        <tr>
                            <td>
                                <label>Tipo</label>
                            </td>
                            <td>
                                <div class="input-control select size3" data-role="input-control">
                                    <select id="tipo" name="tipo" placeholder="Tipo" required></select>
                                </div>  
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label>Iteraci&oacute;n</label>
                            </td>
                            <td>
                                <div class="input-control select size3" data-role="input-control">
                                    <select id="iteracion" name="iteracion" placeholder="Iteracion" required></select>
                                </div>
                            </td>
                        </tr>  
                        <tr>
                            <td>
                                <label>Prioridad</label>
                            </td>
                            <td>
                                <div class="input-control select size3" data-role="input-control">
                                    <select id="prioridad" name="prioridad" placeholder="Prioridad" required></select>
                                </div>
                            </td>
                        </tr>  
                        <!--automaticos-->
                        <input id="scodigo" name="codigo" type="hidden" />
                        <input id="id_requerimiento" name="id_requerimiento" type="hidden" />
                        <tr>
                            <td>
                                <label>T&iacute;tulo</label>
                            </td>
                            <td>
                                <div class="input-control text size5" data-role="input-control">
                                    <input onkeyup="this.value = this.value.toUpperCase();" id="stitulo" name="titulo" type="text" placeholder="Titulo" required>
                                    <button class="btn-clear"></button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label>Descripci&oacute;n</label>
                            </td>
                            <td>
                                <div class="input-control textarea" data-role="input-control">
                                    <!--<input id="descripcion" name="descripcion" type="text" placeholder="Desccripci&oacute;n" required >-->
                                    <textarea cols="30" rows="4"  id="descripcion" name="descripcion" placeholder="Desccripci&oacute;n" required></textarea>
                                    <!--<button class="btn-clear"></button>-->
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                 <label>Responsable</label>
                            </td>
                            <td>
                                <div class="input-control select size3" data-role="input-control">
                                    <select id="responsable" name="responsable" placeholder="Responsable" required></select>
                                </div>                                
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label>Fecha Inicial</label>
                            </td>
                            <td>
                                <div class="input-control text size2" id="fecini">
                                    <input id="sinicio" type="text" name="inicio"  placeholder="Fecha Inicio" required />
                                    <button class="btn-clear"></button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label>Fecha Final</label>
                            </td>
                            <td>
                                <div class="input-control text size2" data-role="input-control">
                                    <input id="sfin" name="fin" type="text" placeholder="Fecha Final" required>  
                                    <button class="btn-clear"></button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label>Estado</label>
                            </td>
                            <td>
                                <div class="input-control select size3" data-role="input-control">
                                    <select id="estado" name="estado" placeholder="Estado" required></select>
                                </div>
                            </td>
                        </tr>
                                              
                    </table>
                <br />
                <input type="submit" id="enviar" style="display: none" value="Guardar" />
                </form>
            </div>
        
        
        
    </body>
</html>